<template>
  <div id="app">
    <!-- 写普通的button、input也是会显示出来的 -->
    <button>app里面的东西</button>
    <input type="text">肯定会被渲染出来

    <!-- 点击跳转到首页 -->
    <!-- router-link是vue-router里面自动注册过的两个组件-是全局组件 -->
    <!-- 全局组件可以在任何一个地方使用，vue-router里面的源码里面注册过这个组件 -->
    <!-- router-link最终会被渲染成a标签，点击之后网址内容会发生改变 -->
    <!-- tag属性可以把router-link渲染成button等按钮 -->
    <!-- raplace保证不可以点击前进后退按钮进行返回 -->
    <!-- 
      router-link里面是有class属性的，我们可以设置样式，
      只要点击了处于活跃状态就会出现该class属性，一旦点击过后，
      跳转到其他组件，再点击其他才会出现class，原来的class属性消失
    -->
    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 动态路由 -->
    <!-- <router-link to="/user/zhangsan">用户</router-link> -->
    <!-- 改进后 -->
    <router-link :to="'/user/' + userId">用户</router-link>
    <h2>可以参看计算属性：{{ $route }}</h2>

    <!-- <router-link to="/profile">档案</router-link> -->
    <router-link :to="{
      path: '/profile',
      // query查询
      // 上面这些也是可以像这样传递一个对象进去，只是不传递参数不用这样写
      query: { name: '张三', age: 18, height: 1.88 }
    }">档案</router-link>
    <h2>{{ $route.query }}</h2><!-- { name: '张三', age: 18, height: 1.88 } -->
    <h2>{{ $route.query.name }}</h2><!--张三 } -->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>


    <!-- 如果不写router-link也是可以的，使如下使用button也行 -->
    <button @click="homeClick">首页2</button>
    <button @click="aboutClick">关于2</button>

    <!-- 渲染出来对应的组件页面-存放位置 -->
    <!-- 组件改变就会替代router-view,可以存放在任何地方，占位-之后的router-link显示位置 -->
    <router-view name="path"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'lisi'
    }
  },
  methods: {
    // 代码的方式修改组件跳转
    homeClick() {
      // console.log('homeClick');
      // 通过代码的方式修改路由vue-router
      // vue-router原码在所有的组件里面都加了一个$router属性
      // 这里的this代表当前组件,拿到$router对象，调用该对象的push方法
      this.$router.push('/home')
      // 不要写成history.push
    },
    aboutClick() {
      // push的等同于内部在调用pushState方法
      // 方法二
      // this.$router.push('/about')
      // 方法三
      this.$router.replace('/about')//没有返回前进后退功能
      console.log('aboutClick');
    },
    userClick() {
      this.$router.push('/user/' + this.userId)
    },
    profileClick() {
      this.$router.push('/profile')
      this.$router.push({
        path: 'profile',
        query: {
          name: 'kobe',
          height: 7.85,
          age: 89
        }
      })
    }
  }
}
</script>

<style>
/* 改名前 */
.router-link-active {
  /* 非标准模式 */
  /* color: red; */
  /* 标准模式 */
  color: #f00;
}

/* 改名后 */
.active {
  color: #bfa;
}
</style>
